<template>
	<div class="main">
		<div class="title">密码长度6-24位，可以是数字、字母等任意符号</div>
		<div class="new">
			<div class="group">
				<input type="password" placeholder="请输入新密码" v-model="password">
			</div>
			<div class="group">
				<input type="password" placeholder="请确认新密码" v-model="password2">
			</div>
			<van-button type="primary" block @click="submit()" class="btn">确定</van-button>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant';
export default {
	data () {
		return {
			password:"",
			password2:""
		}
	},
	methods:{
		//点击确定
		submit:function(){
			if(this.password && this.password2){
				if(this.password == this.password2){
					if(this.password.length>=6 && this.password.length<=24){
						this.modifPassword();
					}
					else{
						Toast('密码必须是6-24位');
					}
				}
				else{
					Toast('两次密码不一致');
				}
			}
			else{
				Toast('密码不能为空');
			}
		},
		//请求
		modifPassword:function(){
			this.$axios.post('/login/password',{
				password:this.password,
				phone:this.common.getCookie('phone'),
			})
			.then(res=>{
				if(res.data.code == 1){
					this.$router.push({path:"/"});
				}
			})
		}
	},
	created:function(){
		document.title = "设置密码";
	}
}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #fff;
	}
	.title{
		padding: 15px 0;
		background-color: #F8F8F8;
		color: #888;
		text-align: center;
		font-size: 14px;
	}
	.new{
		padding: 15px;
		.btn{
			margin-top: 0.5rem;
		}
	}
	.group{
		padding: 15px 0;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		.icon{
			height: 18px;
			margin-right: 8px;
		}
		input{
			width: 100%;
			border: none;
		}
	}
</style>